<template>
  <el-card class="content">
    <el-form inline ref="searchForm" :model="searchForm" class="form">
      <el-form-item label="监测设备类型" prop="sensorList">
        <el-select v-model="searchForm.sensorList" size="mini" clearable>
          <el-option
            v-for="item in options"
            :key="item.monitorTypeId"
            :label="item.monitorTypeName"
            :value="item.monitorTypeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="getlist()"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      stripe
      size="small"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="name" label="测点名称"> </el-table-column>
      <el-table-column prop="description" label="预警原因"> </el-table-column>
      <el-table-column prop="warnTime" label="预警时间"> </el-table-column>
      <el-table-column prop="warnType" label="预警类型">
        <template slot-scope="scope">
          <el-button v-if="scope.row.warnType == 0" type="success" size="mini">
            正常
          </el-button>
          <el-button
            v-else-if="scope.row.warnType == 1"
            type="danger"
            size="mini"
            >数据预警</el-button
          >
          <el-button
            v-else-if="scope.row.warnType == 2"
            type="danger"
            size="mini"
            >设备预警</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column prop="dealStatus" label="推送状态">
        <template slot-scope="scope">
          <span
            size="mini"
            v-if="scope.row.warnType == 2 && scope.row.dealStatus == 1"
            >已处理</span
          >
          <span
            size="mini"
            v-if="scope.row.warnType == 2 && scope.row.dealStatus == 0"
            >未处理</span
          >
        </template>
      </el-table-column> -->
      <el-table-column prop="dealUser" label="处理人"> </el-table-column>
      <el-table-column prop="dealStatus" label="处理状态">
        <template slot-scope="scope">
          <span
            size="mini"
            v-if="
              scope.row.dealStatus == 1 &&
              (scope.row.warnType == 0 || scope.row.warnType == 1)
            "
            >已处理</span
          >
          <span
            size="mini"
            v-else-if="scope.row.dealStatus == 0 && scope.row.warnType == 2"
            >未处理</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="dealTime" label="处理时间">
        <template slot-scope="scope">
          <span v-if="scope.row.dealStatus == 1 && scope.row.warnType == 2">{{
            scope.row.dealTime
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dealType" label="处理方式">
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.dealType == 0 &&
              (scope.row.warnType == 0 || scope.row.warnType == 1)
            "
          ></span>
          <span v-else-if="scope.row.dealType == 1 && scope.row.warnType == 2"
            >一小时内不预警</span
          >
          <span v-else-if="scope.row.dealType == 2 && scope.row.warnType == 2"
            >十二小时内不预警</span
          >
          <span v-else-if="scope.row.dealType == 3 && scope.row.warnType == 2"
            >一天内不预警</span
          >
          <span v-else-if="scope.row.dealType == 4 && scope.row.warnType == 2"
            >三天内不预警</span
          >
          <span v-else-if="scope.row.dealType == 5 && scope.row.warnType == 2"
            >一周内不预警</span
          >
        </template>
      </el-table-column>
      <!-- <el-table-column prop="warnType" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.warnType == 2"
            type="danger"
            size="mini"
            @click="show_process_dialog(scope.row)"
            >点击处理</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </el-card>
</template>

<script>
import { getMonitoringTypeAll } from "../../api/api";
import { getWarnListGpByPage } from "../../api/warning";
export default {
  name: "WarningRemember",
  data() {
    return {
      searchForm: {
        sensorList: null,
      },
      query: {
        pagesize: 10,
        page: 1,
      },
      list: [],
      total: 0,
      tailingPondId: "",
      options: [],
    };
  },

  mounted() {
    this.tailingPondId = sessionStorage.getItem("sensorId");
    this.getlistss();
    this.getlist();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getlist();
    },
    //所有类型
    async getlistss() {
      await getMonitoringTypeAll({ tailingPondId: this.tailingPondId }).then(
        (res) => {
          this.options = res.parameter;
        }
      );
    },
    //分页查询
    async getlist() {
      await getWarnListGpByPage({
        monitorTypeId: this.searchForm.sensorList,
        tailingPondId: this.tailingPondId,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
      }).then((res) => {
        if (res.resultCode == "200") {
          this.list = res.parameter.list;
          this.total = res.parameter.total;
        } else {
          this.list = [];
          this.total = 0;
        }
      });
    },
  },
};
</script>

<style scoped>
.content {
  margin-left: 0.08rem;
  height: 90vh;
  width: 100%;
  /* background: pink; */
}
.el-table {
  margin-bottom: 0.15rem;
  display: block;
  height: 65vh;
  overflow: auto;
  text-align: center;
}
.el-table::before {
  z-index: inherit;
}
.form {
  margin-left: 0.2rem;
  margin-top: 0.15rem;
}
.el-table >>> .el-button {
  width: 0.4rem;
}
</style>